<template>
<com-main>
   <div slot="com_header">首页>商品管理>商品列表</div>
   <div slot="com_content">
      
      <div>
        <el-form>
          <el-form-item>
            <el-input
              style="width: 500px"
              v-model="searchobj.query"
              placeholder="请输入商品名称"
            ></el-input>
            <el-button><i class="el-icon-search" @click="query"></i></el-button>
            <el-button type="primary" @click="gosave">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

       <el-table
      :data="goodslist"
      style="width: 100%">
      <template slot-scope="">
         <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="380">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="280">
      </el-table-column>
      <el-table-column prop="goods_number" label="商品数量" width="280">
      </el-table-column>
      <el-table-column prop="add_time" label="创建时间" width="280">
      </el-table-column>
      <el-table-column  label="操作">
      <template>
         <el-button type="primary" icon="el-icon-edit"></el-button>
         <el-button type="danger" icon="el-icon-delete"></el-button>
         <!-- <el-button type="warning" icon="el-icon-s-tools"></el-button> -->
      </template>
    </el-table-column>
      </template>
      
    </el-table>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchobj.pagenum"
      :page-sizes="[1, 2, 4, 8]"
      :page-size="searchobj.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

   </div>
</com-main>
</template>
<script>
import ComMain from '../../components/commain.vue'
import {api_query} from '../../api/goods'
export default {
   components:{
      ComMain
   },
   data() {
      return {
         total:1,
         searchobj:{
            query:'',	              //查询参数
            pagenum:1,	               //当前页码
            pagesize:5,	             //每页显示条数
            // total:'',	                //总共商品条数
            // pagenum:'',	               //当前商品页数
            // goods_id:'',	             //商品 ID
            // goods_name:'',	                //商品名称
            // goods_price:'',	             //价格
            // goods_number:'',	                //数量
            // goods_weight:'',	               //重量
            // goods_state:'',	               //商品状态
            // add_time:'',	               //添加时间
            // upd_time:'',	                 //更新时间
            // hot_mumber:'',	                     //热销品数量
            // is_promote:'',	                    //是否是热销品
         },
         goodslist:[]
      }
   },
   mounted() {
      this.query();
   },
   methods: {
      gosave(){
         this.$router.push('/goods/save')
      },
       async query(){
      let rst=await api_query(this.searchobj);
      let {data,meta}=rst;
       let{goods,pagenum,total}=data;
      if(meta.status==200){
      this.goodslist=goods;
      this.total=total;
      
        }
      },
         handleSizeChange(val) {
        this.searchobj.pagesize=val;
        this.query();
      },
      handleCurrentChange(val) {
        this.searchobj.pagenum=val;
        this.query();
      }

   }
  
}

</script>
<style>
.block{
   margin-top: 20px;
}

</style>